<template>

  <div class="sexAgeCard" v-if="show">
    <a-row :gutter="24">
      <div class="tj-title">
        <h2>性别及年龄分布</h2>
        <div class="search">
          <a-select defaultValue="activeUsers" :value="userType" style="width: 120px" @change="handleType">
            <a-select-option value="activeUsers">活跃用户数</a-select-option>
            <a-select-option value="newUser">新增用户数</a-select-option>
          </a-select>
          <a-select defaultValue="1" :value="time" style="width: 120px;margin-left: 10px;" @change="handleTime">
            <a-select-option value="0">昨天</a-select-option>
            <a-select-option value="1">最近7天</a-select-option>
            <a-select-option value="2">最近30天</a-select-option>
          </a-select>
          <span style="margin-left: 10px; ">{{startTime}} - {{endTime}}</span>
        </div>
      </div>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="12" class="sex">
        <v-chart :forceFit="true" :height="height" :data="sexData" :scale="sexScale">
          <v-tooltip :showTitle="false" dataKey="item*percent"/>
          <v-axis/>
          <v-legend dataKey="item"/>
          <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig"/>
          <v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>
        </v-chart>
      </a-col>
      <a-col :sm="24" :md="24" :xl="12" class="age">
        <v-chart :forceFit="true" :height="height" :data="ageData" :scale="ageScale">
          <v-tooltip/>
          <v-axis/>
          <v-bar position="year*count"/>
        </v-chart>
      </a-col>
    </a-row>
  </div>


</template>

<script>

  import { getUserPortrait } from '../../api/dashboard/chart'
  import moment from 'moment'


  const ageScale = [{
    dataKey: 'count'
  }]


  const sexScale = [{
    dataKey: 'percent',
    min: 0,
    formatter: '.0%'
  }]

  export default {
    data() {
      return {
        show: false,
        startTime: '',
        endTime: '',
        userType: 'activeUsers',
        time: '1',
        sexData: [],
        ageData: [],
        // sexData,
        // ageData,
        sexScale,
        ageScale,
        height: 400,
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        },
        labelConfig: ['percent', {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          }
        }]
      }
    },
    props: ['companyid'],
    created() {
      this.getAllMerchant('1', 'activeUsers')
    },
    methods: {

      handleType(value) {
        // console.log(`selected ${value}`)
        this.userType = value
        this.getAllMerchant(this.time, value)
      },
      handleTime(value) {
        // console.log(`selected ${value}`)
        this.time = value
        this.getAllMerchant(value, this.userType)

      },
      getAllMerchant: function(time, type, companyId) {

        //传两个参数过来
        // time
        // type 判断取什么值 visitUvNew / visitUv
        let myTime = new Date()
        //昨天
        const yesterday = moment(myTime).add(-1, 'd').format('YYYY年MM月DD日')
        //7天
        const week = moment(myTime).add(-1, 'w').format('YYYY年MM月DD日')
        //30天
        const month = moment(myTime).add(-1, 'M').format('YYYY年MM月DD日')

        if (time == '0') {
          this.startTime = yesterday
          this.endTime = yesterday
        } else if (time == '1') {
          this.startTime = week
          this.endTime = yesterday
        } else if (time == '2') {
          this.startTime = month
          this.endTime = yesterday
        }

        const body = {
          type: time,
          companyid: companyId != null ? companyId : this.companyid
        }

        console.log('ageSexBar')
        console.log(body)

        // 取值男女 年龄段

        const DataSet = require('@antv/data-set')

        getUserPortrait(body).then(res => {
          if (res.code === 200) {
            this.show = true
            let sourceData = []
            let agesData = []
            if (type == 'activeUsers') {//活跃用户
              // console.log('活跃用户')
              //网络数据
              let obj = res.result.visitUv.genders
              for (let i in obj) {
                sourceData.push({
                  item: i,
                  count: obj[i]
                })
              }

              //我是分割线 饼形图数据源上

              let age = res.result.visitUv.ages

              for (let i in age) {
                agesData.push({
                  year: i,
                  count: age[i]
                })
              }


            } else {// 新增用户
              // console.log('新增用户')

              //网络数据
              let obj = res.result.visitUvNew.genders
              for (let i in obj) {
                sourceData.push({
                  item: i,
                  count: obj[i]
                })
              }

              //我是分割线 条形图数据源下

              let age = res.result.visitUvNew.ages

              for (let i in age) {
                agesData.push({
                  year: i,
                  count: age[i]
                })
              }

            }

            const dv = new DataSet.View().source(sourceData)
            dv.transform({
              type: 'percent',
              field: 'count',
              dimension: 'item',
              as: 'percent'
            })

            this.sexData = dv.rows

            this.ageData = agesData

          } else {

            this.show = false

            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      }
    }
  }
</script>


<style scoped lang="less">


  .tj-title {
    width: 100%;
    padding: 0 20px;

    h2 {
      line-height: 60px;
    }
  }

</style>